<template>
    <div class="content-wrapper">
        <div class="nav-wrapper">
            <el-scrollbar style="height: calc(100vh - 80px)">
                <div class="nav" v-for="nav in navConfig" :key="nav.name">
                    <div class="nav-name">{{nav.name}}</div>
                    <ul class="nav-item">
                        <li class="nav-title"
                            v-for="navItem in nav.list"
                            :key="navItem.path"
                            :class="{'active': navItem.path.slice(1) === curNav}"
                            @click="navClick(navItem.path)"
                        >
                            {{navItem.title}}
                        </li>
                    </ul>
                </div>
            </el-scrollbar>
        </div>
        <div class="comp-description">
            <el-scrollbar style="height: calc(100vh - 80px)">
                <div class="markdown" v-html="result"></div>
                <div class="demo" v-show="component">
                    <div class="demo-title">示例：</div>
                    <component :is="component"></component>
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
    import navConfig from '@/examples/nav.config.json'
    import MarkdownIt from 'markdown-it'
    import hljs from 'highlight.js/lib/core'
    import javascript from 'highlight.js/lib/languages/javascript'
    import html from 'highlight.js/lib/languages/xml'
    import json from 'highlight.js/lib/languages/json'
    import shell from 'highlight.js/lib/languages/shell'
    import 'highlight.js/styles/color-brewer.css'

    // 注册高亮语言
    hljs.registerLanguage('javascript', javascript)
    hljs.registerLanguage('html', html)
    hljs.registerLanguage('json', json)
    hljs.registerLanguage('shell', shell)

    // 注册组件文档
    const registerFile = (navConfig) => {
        let fileList = {}
        navConfig.forEach(obj => {
            let navs = obj.list
            navs.forEach(nav => {
                fileList[nav.path.slice(1)] = {
                    doc: () => require(`../docs${nav.path}.md`),
                    comp: nav.comp
                }
            })
        })
        return fileList
    }

    const fileList = registerFile(navConfig)

    export default {
        name: "main-content",
        data() {
            return {
                navConfig,
                curNav: '',
                result: '',
                component: ''
            }
        },
        mounted() {
            // 获取路由参数加载对应文档和示例组件
            const eg = this.$route.params.eg
            this.curNav = eg
            this.markdown = new MarkdownIt({
                html: true,
                highlight: (str, lang) => {
                    if (lang && hljs.getLanguage(lang)) {
                        try {
                            return '<pre class="hljs"><code>' +
                                hljs.highlight(lang, str, true).value +
                                '</code></pre>'
                        } catch (e) {
                            console.log(e)
                        }
                    }

                    return '<pre class="hljs"><code>' + this.markdown.utils.escapeHtml(str) + '</code></pre>';
                }
            })
            this.result = this.markdown.render(fileList[eg].doc())
            this.component = fileList[eg].comp
        },
        methods: {
            // 导航切换
            navClick(nav) {
                this.curNav = nav.slice(1)
                this.$router.push({
                    path: `/component${nav}`
                })
            }
        },
        watch: {
            // 监听路由参数变化，切换文档和组件
            '$route.params'(param) {
                this.result = this.markdown.render(fileList[param.eg].doc())
                this.component = fileList[param.eg].comp
            }
        }
    }
</script>

<style lang="less" scoped>
    @import "~@/assets/css/mixin";
    .content-wrapper {
        display: flex;
        height: 100%;
        .nav-wrapper {
            width: 240px;
            padding-top: 50px;
            .nav:not(:nth-child(1)) {
                margin-top: 15px;
            }
            .nav-name {
                font-size: 16px;
                color: #333;
                line-height: 40px;
                height: 40px;
                padding: 0;
                text-decoration: none;
                display: block;
                position: relative;
                transition: .15s ease-out;
                font-weight: 700;
            }
            .nav-title {
                display: block;
                height: 40px;
                color: #444;
                line-height: 40px;
                font-size: 14px;
                font-weight: 400;
                cursor: pointer;
                .no-wrap();
                &:hover,
                &.active {
                    color: #409eff;
                }
            }
        }
        .comp-description {
            flex: 1;
            padding-top: 50px;
            .demo {
                .demo-title {
                    font-size: 22px;
                    margin: 55px 0 20px;
                    font-weight: 400;
                    color: #1f2f3d;
                }
            }
        }
    }
</style>
<style>
    .markdown h1,
    .markdown h2 {
        font-weight: 400;
        color: #1f2f3d;
    }
    .markdown h1 {
        font-size: 28px;
        line-height: 37px;
    }
    .markdown h2 {
        font-size: 22px;
        margin: 55px 0 20px;
    }
    .markdown p {
        font-size: 14px;
        color: #5e6d82;
        line-height: 1.5em;
        margin: 1em 0;
    }
    .hljs {
        line-height: 1.8;
        font-family: Menlo,Monaco,Consolas,Courier,monospace;
        font-size: 12px;
        padding: 18px 24px;
        background: #fafafa;
        border: 1px solid #eaeefb;
        margin-bottom: 25px;
        border-radius: 4px;
    }
    .hljs:hover {
        box-shadow: 0 0 8px 0 rgba(232, 237, 250, 1), 0 2px 4px 0 rgba(232, 237, 250, 1);
    }
</style>
